<script setup>
import {h} from "vue";
import infoCommunal from "@/components/communal/info-communal.vue";
import calenderUtil from "@/components/utils/calender-util.vue";
import textChart from "@/components/chart/text.vue"
import {BookOutline as BookIcon} from "@vicons/ionicons5";
import { isYesterday, addDays } from "date-fns/esm";
import {getFinishClass, getUserByUsername} from "@/res/api/user_api.js";

let value= ref(addDays(Date.now(), 1).valueOf())
function handleUpdateValue(_, { year, month, date }) {
  $message.success(`${year}-${month}-${date}`);
}
function isDateDisabled(timestamp) {
  if(!isYesterday(timestamp)) {
    return false;
  } else {
    return true;
  }
}

// 获取用户卡片内容
let userCardContent = ref([])
let age = ref('未知')
getUserByUsername().then(res => {
  // console.log(res)
  userCardContent.value = res.data
  // 性别判断
  if(userCardContent.value.sex === 1) { age.value = '男' }
  else if (userCardContent.value.sex === 2){ age.value = '女' }
  else { age.value = '未知'}
}).catch(err => {
  console.log(err)
})


// 获取已结束的课程
let finishedCourse = ref([])
getFinishClass().then(res => {
  // console.log(res)
  finishedCourse.value = res.data.list
}).catch(err => {
  $message.error(err.message)
})

const avatars = [
  "https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg",
  "https://avatars.githubusercontent.com/u/20943608?s=60&v=4",
  "https://avatars.githubusercontent.com/u/46394163?s=60&v=4",
  "https://avatars.githubusercontent.com/u/39197136?s=60&v=4",
  "https://avatars.githubusercontent.com/u/19239641?s=60&v=4"
];

const items = Array.from({ length: 10 }, (_, i) => ({
  key: `${i}`,
  value: i,
  avatar: avatars[i % avatars.length]
}));

</script>

<template>
  <info-communal action-key="user-home">
    <n-flex class="info-area" justify="center" align="center">
        <div class="ba-area">
          <div class="circular"/>
          <div class="circular"/>
        </div>
        <n-space justify="space-around" class="info-cart"  align="center">
          <n-avatar
              class="avatar-action"
              round
              :size="96"
              :src="userCardContent.imgUrlIcon"
          />
          <n-ul>
            <n-p style="font-size: 1.2rem;font-weight: bold">{{ userCardContent.nickname }}</n-p>
            <n-li>linnterID: {{ userCardContent.id }}</n-li>
            <n-li>性别：
              {{ age }}
            </n-li>
<!--            <n-li>中国 | 重庆 | 巴南</n-li>  TODO: 地址加上去之后需要弄成这个样式 2.0改动-->
            <n-li>个性签名：
              {{ userCardContent.signature != null ? userCardContent.signature = userCardContent.signature : "你还没有签名喔~~"}}
            </n-li>
          </n-ul>
          <n-space justify="space-around">
            <n-grid :cols="3" x-gap="32">
              <n-gi>
                <n-space vertical align="center">
                  <n-p>总学习时长</n-p>
                  <div class="circular-show">
                    20H
                  </div>
                </n-space>
              </n-gi>
              <n-gi>
                <n-space vertical align="center">
                  <n-p>学习天数</n-p>
                  <div class="circular-show">
                    7Day
                  </div>
                </n-space>
              </n-gi>
              <n-gi>
                <n-space vertical align="center">
                  <n-p>学习等级</n-p>
                  <div class="circular-show">
                    Lv1
                  </div>
                </n-space>
              </n-gi>
            </n-grid>
          </n-space>
        </n-space>
      </n-flex>
    <!-- 学习日历 -->
    <n-flex vertical class="info-area">
      <n-p class="title-p">学习记录</n-p>
      <n-space class="ui-learn-records" justify="space-evenly" align="center">
        <!-- 日历 -->
        <calender-util/>
        <!--数据可视化-->
        <textChart/>
      </n-space>
    </n-flex>
    <!-- 已完成的课程 -->
    <n-flex vertical class="info-area">
<!--      <n-p class="title-p">已完成课程</n-p>-->
      <div class="title-p">
        <n-text>已完成课程</n-text>
        <n-p class="title-line"/>
      </div>
      <n-carousel autoplay
                  :slides-per-view="4"
                  :space-between="20"
                  :loop="false"
                  draggable
                  mousewheel
                  show-arrow
                  dot-type="line"
      >
        <n-carousel-item v-for="(item, index) in finishedCourse" :key="index">
         <n-card class="hover-pointer" hoverable>
           <template #cover>
             <n-image
                 style="width: 100%;height: 9rem"
                 :src="item.classImage"
                 preview-disabled
             />
           </template>
           <n-h3>课程：{{ item.classTitle }} </n-h3>
           <n-space justify="space-around">
             <n-text depth="2">类型：<n-divider vertical/>{{ item.classType }}</n-text>
             <n-text depth="2">节点： <n-divider vertical/>{{ item.classNode }}</n-text>
           </n-space>
         </n-card>
        </n-carousel-item>
      </n-carousel>
    </n-flex>
    <!-- 历史模型 -->
    <n-flex vertical class="info-area">
      <div class="title-p">
        模型历史回顾
        <n-p class="title-line"/>
      </div>
      <n-space class="ui-learn-records" justify="space-around">
        <n-list  hoverable clickable class="ant">
          <n-list-item>
            <n-space justify="space-between">
              <n-p>模型名称</n-p>
              <n-p>调用时间</n-p>
              <n-p>运行结果</n-p>
            </n-space>
          </n-list-item>
          <n-virtual-list style="max-height: 240px;padding: 0 1.2rem;box-sizing: border-box" :item-size="42" :items="items">
            <template #default="{ item }">
              <n-space justify="space-between" :key="item.key" class="item hover-list" style="height: 2.7rem">
                <n-text>模型名称</n-text>
                <n-time/>
                <n-text type="default">
                  <span class="hover-pointer">点击下载</span>
                  |
                  <span class="hover-pointer">查看</span>
                </n-text>
              </n-space>
            </template>
          </n-virtual-list>
        </n-list>
      </n-space>
    </n-flex>
  </info-communal>
</template>

<style lang="scss" scoped>
.item {
  display: flex;
  align-items: center;
}
.avatar {
  width: 28px;
  border-radius: 50%;
  margin-right: 10px;
}
@mixin animation($alt) {
  /*动画名称*/
  animation-name: up-down;
  /*持续时间*/
  animation-duration: 1s;
  /*延迟时间*/
  animation-delay: 0s;
  /*动画方向*/
  animation-direction: $alt;
  /*播放次数-循环播放*/
  animation-iteration-count: infinite;
}
@mixin area {
  position: relative;
  width: 100%;
  min-height: 16rem;
  overflow: hidden;
}
.ba-area{
  position: absolute;
  z-index: 0;
  @include area;
  .circular:first-child{
    right: 1rem;
    @include animation(alternate)
  }
  .circular:nth-child(2){
    left: 1rem;
    background: rgb(75, 140, 115);
    @include animation(alternate-reverse)
  }
}
@keyframes up-down {
  0% {
    top: 0.2rem;
  }
  20% {
    top: 0.6rem;
  }
  40% {
    top: 1rem;
  }
  50%{
    top: 1.2rem;
  }
  60% {
    top: 1.4rem;
  }
  70% {
    top: 1.6rem;
  }
  80% {
    top: 1.8rem;
  }
  90% {
    top: 3rem;
  }
  100% {
    top: 5rem;
  }
}

.info-area{
  @include area;
  &:nth-child(2){
    box-sizing: border-box;
    padding: 0 5%;
    margin-top: 2rem;
    height: 27rem;
    border-top: 1px solid #000;
  }
  &:nth-child(3){
    margin-top: 2rem;
    min-height: 32rem;
    border-top: 1px solid #000;
    box-sizing: border-box;
    padding: 0 5%;
    background: url("/src/assets/picture/show/Ellipse17.png") no-repeat left /12rem,
    url("/src/assets/picture/show/Ellipse18.png") no-repeat right /12rem
  ;
  }
  &:last-child{
    box-sizing: border-box;
    padding: 0 5%;
    margin: 2rem 0;
    height: 27rem;
    border-top: 1px solid #000;
  }
}
.title-p{
  margin: 1.2rem 0 .21rem 1rem;
  font-weight: bold;
  font-size: 21px;
  .title-line{
    width: 2.5rem;
    background: #1f436c;
    padding: 2px 0;
  }

}
.info-cart{
  position: absolute;
  border-radius: 1.2rem;
  background: #f2f2f233;
  backdrop-filter: blur(15px);
  width: 88%;
  height: 12rem;
}
.ui-learn-records{
  width: 100%;
  background: #486399;
  //overflow: hidden;
  height: 27rem;
}
.calendar{
  width: 100%;
  height: 16rem;
}
.avatar-action{
  box-shadow: 2px 2px 20px 2px #00244e;
  transition: 0.21s 0s ease-in-out all;
  transform: scale(1);
  &:hover{
    transition: 0.21s 0s ease-in all;
    transform: scale(1.2);
  }
}
.curriculum-end-body{
  box-sizing: border-box;
  //margin: 0 2%;
  border-radius: 1.2rem;
  height: 72%;
  width: 96%;
  padding: 1rem 2rem;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.64);
}
.ant{
  width: 65rem;
  margin-top: 2%;
  transition: .72s 0s ease-in-out all;
  animation-name: ant;
  animation-duration: 1s;
  animation-delay: 0.24s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}
.hover-list:hover{
  background-color: #f8fafc;
}
</style>
